<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Fondo animado con CSS</title> 

<style>
@-webkit-keyframes fondo{
   from {top: -260%;}
   to {top: 100%;}
}
#matrix{
   margin: 1em auto;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: #000;
   color: rgba(0, 255, 0, .7);
   text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
   position: relative;   
}
#matrix DIV{
   position: absolute;   
   top: 0;
   /* rotamos el texto*/ 
   -webkit-transform-origin: 0%;
   -webkit-transform: rotate(90deg); 
   -webkit-animation-name: fondo;         
   -webkit-animation-iteration-count: infinite; 
   -webkit-animation-direction: normal; 
   
}
.f1{
   font-size: 1.2em;
}
.f2{
   font-size: .9em;
}
.c1{
   color: rgba(0, 255, 0, .5);
}
.d1{
   -webkit-animation-duration: 4s;
}
.d2{
   -webkit-animation-duration: 6s;
}
.d3{
   -webkit-animation-duration: 8s;
}
.d4{
   -webkit-animation-duration: 10s;
}
.de{   
   -webkit-animation-delay: 3s;
}
</style>
</head>

<body>

   <div id="matrix">   
      <div class="d3 f1" style="left:30px;">hgd4ldhbc9kpugccsrq</div> 
      <div class="d1 f2 c1" style="left:60px;">trzews0yfkldf4cvgbhjn</div> 
      <div class="d2 f1" style="left:80px;">sodhr49whuyfbsrnlepjh</div> 
      <div class="d4 c3 de" style="left:110px;">fue73sjf0tbkxpowfvn</div> 
      <div class="d2 c1" style="left:140px;">sjdhfgueiwfgivecjowxkwpkpomvcjoeuur</div> 
      <div class="d3 f2 c1" style="left:170px;">trzhfggh</div> 
      <div class="d1 c1" style="left:185px;">thgpmsrthdvytfv09876tqfgv</div> 
      <div class="d3 de" style="left:200px;">dhiwgfduesrjm</div> 
      <div class="d4 f1" style="left:250px;">osadharshdyfeujm</div> 
      <div class="d2 de" style="left:290px;">fwedjsdjhlgmrghftdercwewergjm</div> 
      <div class="d3 f2" style="left:310px;">sodhr49whayfbsrnlepjh</div> 
      <div class="d1 f1" style="left:350px;">p00oi0nf5sujhgdgbrjs36gdrgjpo</div> 
      <div class="d4 c1" style="left:390px;">h68kgdetklbfbeswk</div> 
      <div class="d2 de" style="left:410px;">dfrttvbscfsr</div> 
      <div class="d1 c1 de" style="left:4430px;">sgfyb0hfrese4kc</div>
      <div class="d3 f1" style="left:530px;">hgd4ldhbc9kpugccsrq</div> 
      <div class="d1 f2 c1" style="left:560px;">trzews0yfkldf4cvgbhjn</div> 
      <div class="d2 f1" style="left:580px;">sodhr49whuyfbsrnlepjh</div> 
      <div class="d4 c3 de" style="left:610px;">fue73sjf0tbkxpowfvn</div> 
      <div class="d2 c1" style="left:740px;">sjdhfgueiwfgivecjowxkwpkpomvcjoeuur</div> 
      <div class="d3 f2 c1" style="left:770px;">trzhfggh</div> 
      <div class="d1 c1" style="left:785px;">thgpmsrthdvytfv09876tqfgv</div> 
      <div class="d3 de" style="left:800px;">dhiwgfduesrjm</div> 
      <div class="d4 f1" style="left:850px;">osadharshdyfeujm</div> 
      <div class="d2 de" style="left:890px;">fwedjsdjhlgmrghftdercwewergjm</div> 
      <div class="d3 f2" style="left:910px;">sodhr49whayfbsrnlepjh</div> 
      <div class="d1 f1" style="left:950px;">p00oi0nf5sujhgdgbrjs36gdrgjpo</div> 
      <div class="d4 c1" style="left:990px;">h68kgdetklbfbeswk</div> 
      <div class="d2 de" style="left:1010px;">dfrttvbscfsr</div> 
      <div class="d1 c1 de" style="left:1030px;">sgfyb0hfrese4kc</div> 
   </div>
</body>
</html>
